                                        <!-- 搜索头部排序组件 -->

<!-- 传入属性 -->
<!-- sortingList:成员渲染数组  name代表标题  showRight是否展示右部箭头栏   status代表箭头的值填入时任意布尔值都可以无需                 注意（但若是默认选择此选项时，则其status应为需要的状态{true代表升序 由低到高  false代表降序  由高到低},                  非默认选中成员，其状态无需在意）
				例：[{name: '智能排序',showRight: false,status: true}]
				  
    defaultItem:默认选中成员位置
    defaultStatus:默认的升降规则(每次切换成员时应该执行的默认状态  默认true)   true代表升序 由低到高  false代表降序  由                   高到低 -->
<!-- 传入方法 -->
<!-- sortingItem:使用父组件的函数  传递目前选中的位置信息index  及其箭头状态 status(若设置了隐藏右部箭头 则status为空) -->

<template>
  <div class="com-searchSorting">
    <!-- 搜索成员集中区 -->
    <div class="searchSorting-show">
      <!-- 搜索成员 -->
      <div
        class="searchSorting-show-item"
        v-for="(value, index) in sortingList"
        :key="index"
        @click="searchSortingItem(index, value.status)"
      >
        <!-- 名称 -->
        <!-- ----------------------------------------------------------------------------------- -->
        <text :class="index == itemIndex ? 'searchSorting-show-text' : ''">{{
          value.name
        }}</text>

        <!-- 显示箭头 -->
        <!-- ----------------------------------------------------------------------------------- -->
        <div class="searchSorting-show-item-click" v-show="value.showRight">
          <!-- 箭头上方 -->
          <div
            class="searchSorting-show-item-arrows"
            :style="{
              backgroundImage:
                index != itemIndex
                  ? 'url(https://oss4.komect.com/equity-home/h5/20211130sx_ic_s@2x.png)'
                  : value.status
                  ? 'url(https://oss4.komect.com/equity-home/h5/20211130sx_ic_s_sel@2x.png)'
                  : 'url(https://oss4.komect.com/equity-home/h5/20211130sx_ic_s_nor@2x.png)',
            }"
          ></div>

          <!-- 箭头下方 -->
          <div
            class="searchSorting-show-item-arrows"
            :style="{
              backgroundImage:
                index != itemIndex
                  ? 'url(https://oss4.komect.com/equity-home/h5/20211130sx_ic_@2x.png)'
                  : value.status
                  ? 'url(https://oss4.komect.com/equity-home/h5/20211130sx_ic_x_nor@2x.png)'
                  : 'url(https://oss4.komect.com/equity-home/h5/20211130sx_ic_x_sel@2x.png)',
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 成员渲染数组  name代表标题  showRight是否展示右部箭头栏   status代表箭头的值填入时任意布尔值都可以无需注意（但若是默认选择此选项时，则其status应为需要的状态{true代表升序 由低到高  false代表降序  由高到低},非默认选中成员，其状态无需在意）
    sortingList: {
      type: [Array],
      default() {
        return [
          {
            name: "智能排序",
            showRight: false,
            status: true,
          },
          {
            name: "销量",
            showRight: false,
            status: true,
          },
          {
            name: "好评",
            showRight: false,
            status: true,
          },
          {
            name: "价格",
            showRight: true,
            status: true,
          },
        ];
      },
    },

    // 默认选中成员位置
    defaultItem: {
      type: [String, Number],
      default: 0,
    },

    // 默认的升降规则(每次切换成员时应该执行的默认状态  默认true)   true代表升序 由低到高  false代表降序  由高到低
    defaultStatus: {
      type: [Boolean],
      default: true,
    },
  },
  created() {
    // 同步默认选中成员信息
    this.defaultItem
      ? (this.itemIndex = this.defaultItem)
      : (this.itemIndex = 0);
  },
  data() {
    return {
      // 点击成员位置信息
      itemIndex: "",
    };
  },
  methods: {
    // 成员点击函数
    searchSortingItem(index, status) {
      // 判断此时点击的位置index  是否是已经点击的成员位置itemIndex
      index != this.itemIndex
        ? // 若不是,则将其默认排列为传入的   状态属性defaultStatus
          (this.sortingList[index].status = this.defaultStatus)
        : // 若是同一个位置,则将其状态信息status取反
          (this.sortingList[index].status = !this.sortingList[index].status);

      // 同步点击成员位置
      this.itemIndex = index;

      // 避免产生歧义,将已经设置了右部箭头隐藏的成员的状态status值变成空
      if (!this.sortingList[index].showRight) {
        this.sortingList[index].status = "";
      }

      // 使用父组件的函数  传递目前选中的位置信息index  及其箭头状态 status(若设置了隐藏右部箭头 则status为空)
      this.$emit("sortingItem", {
        index: index,
        itemStatus: this.sortingList[index].status,
      });
    },
  },
};
</script>

<style scoped>
/*  搜索头部排序组件 */
.com-searchSorting {
  width: 100%;
  height: 18px;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 500;
  text-align: left;
  color: #333333;
}

/*  搜索成员集中区 */
.searchSorting-show {
  width: 345px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}

/*  搜索成员 */
.searchSorting-show-item {
  height: 100%;
  display: flex;
  align-items: center;
}

/*  名称 */
.searchSorting-show-item text {
  display: inline-block;
  height: 18px;
  line-height: 18px;
}

/*  容纳箭头容器 */
.searchSorting-show-item-click {
  width: 6px;
  height: 10px;
  margin-left: 4px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-content: center;
}

/*  箭头 */
.searchSorting-show-item-arrows {
  width: 100%;
  height: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*  选中后的文字样式 */
.searchSorting-show-text {
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 600;
  color: #15a177;
}
</style>
